<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简历</title>
    <link rel="stylesheet" href="./css/front/iconfont.css">
  <style>
      *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      :root{
        font-size: 100px;
      }
      .top-nav{
        width: 100%;
        min-width: 350px;
        height: 60px;
        border:1px solid black;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding:0 60px;
        font-size:0.18rem;
      }
      .container{
        width:90%;
        min-width: 350px;
        height: 600px;
        /* border: 1px solid red; */
        margin-left:auto;
        margin-right:auto;
        margin-top:10px;
        display: flex;
      }
      .container>div:nth-of-type(1){
        width:40%;
        height: 100%;
        /* border:1px solid blue; */
        overflow: hidden;
        padding:5px;
        
      }

      .container>div:nth-of-type(2){
        width:60%;
        height: 100%;
        border:1px solid green;
      }

      .left .cade{    
         width:100%;
         height:auto;  
         margin-bottom: 10px;      
      }

      .left .cade .cade-title{
          width: 100%;
          height: 30px;
          line-height: 30px;
          padding:0px 10px;
          /* background-color: blue; */
          color:white;
          font-size: 0.12rem;
          border-top-left-radius: 5px;
          border-top-right-radius: 5px;
      }

      .left .cade .cade-body{
        width: 100%;
        border:1px solid #ccc;
        height: auto;
        padding:5px;
        font-size:0.16rem;
        text-align: center;
      }

      .cade .cade-body .icon{
        background-image: url('./images/mm1.png');
        background-size: cover;
        border-radius: 50%;
        width:100px;
        height: 100px;
        margin: 0px auto; 
        border:1px solid #ccc;
      }

      

      .title-blue{
        background-color: blue;
      }

      .title-green{
        background-color: green;
      }

      .title-yellow{
        background-color: yellow;
      }
  </style>
</head>
<body>
    <!-- 头部导航条 -->
  <nav class="top-nav">
     <div>个人简历</div>
     <div>
         <button>打印</button>
         <button>下载</button>
     </div>
  </nav>
   <main class="container">
     <div class="left">
         <div class="cade">
            <div class="cade-title title-blue">个人信息</div>
            <div class="cade-body">
                <div class="icon"></div>
                <span class="name">张三分</span>
                <span class="iconfont icon-suozaichengshi"></span>
            </div>
         </div>

         <div class="cade">
            <div class="cade-title title-green">技能描述</div>
            <div class="cade-body">
                
            </div>
         </div>

         <div class="cade">
            <div class="cade-title title-yellow">联系我</div>
            <div class="cade-body"></div>
         </div>
     </div>
     <div class="right"></div>
   </main>
</body>
</html>